<template>
  <div style="height:100%;width:100%;">
    <div id="radeCanvas" style="height:100%;width:100%;" ref="radeCanvas"></div>
  </div>
</template>

<script>
// import numeral from "numeral";

export default {
  name: "radeCanvas",
  data() {
    return {
      myChart: null,
    };
  },
  props: {
    cityData: {
      type: Object,
    },
    radeZj: {
      type: Object,
    },
  },
  watch: {
    cityData(val) {
      this.init(val);
    },
  },
  // mounted() {
  //   this.init();
  // },
  methods: {
    init(val) {
      if (this.myChart != null) {
        this.myChart.dispose(); //销毁
      }
      this.myChart = this.$echarts.init(this.$refs.radeCanvas);

      const { radeZj } = this;

      // let legendData = [val.areaName, radeZj.areaName];

      // let zjParams = { ...radeZj };
      // delete zjParams.areaName;

      // let cityParams = val.list;

      // console.log(cityParams)
      // delete cityParams.areaId;
      // delete cityParams.areaName;

      // let data = Object.values(cityParams);
      let zjdata = radeZj.list.map((i) => i.value);

      // var maxNum = 30;

      let radarArr = val.list.map((i) => i.name);
      let data = val.list.map((i) => i.value);
      let dataMaxNum = val.list.map((i) => i.radePrecent);

      let indicatorData = radarArr.map((i, index) => {
        return {
          name: i,
          max: data[index] / dataMaxNum[index] + data[index] / 3,
        };
      });

      let option = {
        legend: {
          bottom: 5,
          // data: ["杭州", "浙江"],
          // data: legendData,
          itemGap: 20,
          selectedMode: "single",
        },
        color: ["#0086FF"],
        // color: ["#FE4300", "#0086FF"],
        tooltip: {
          show: true,
        },

        radar: {
          indicator: indicatorData,
          // indicator: [
          //   { name: "存量效益", max: maxNum },
          //   { name: "投资管理", max: maxNum },
          //   { name: "网络效能", max: maxNum },
          //   { name: "增量效益", max: maxNum },
          // ],
          center: ["50%", "50%"],
          radius: "70%",
          startAngle: 90,
          splitNumber: 4,
          name: {
            textStyle: {
              color: "#333",
            },
          },
          splitArea: {
            areaStyle: {
              color: ["#CEF8FF", "#A5F0FF", "#5FE2FF", "#5FE1FF"].reverse(),
              // shadowColor: "rgba(0, 0, 0, 0.2)",
              // shadowBlur: 10,
            },
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "测试",
            type: "radar",
            tooltip: {
              show: true,
              formatter: function (params) {
                // var list = radarArr

                var html = `
                <div style="font-size:12px">
                <p>${params.name}</p>
                <p>
                <span>${radarArr[0]}:</span>
                <span>${params.value[0]}</span>
                </p>
                <p>
                <span>${radarArr[1]}:</span>
                <span>${params.value[1]}</span>
                </p>
                <p>
                <span>${radarArr[2]}:</span>
                <span>${params.value[2]}</span>
                </p>
                <p>
                <span>${radarArr[3]}:</span>
                <span>${params.value[3]}</span>
                </p>
                </div>
                `;
                return html;
              },
            },
            data: [
              // {
              //   value: zjdata,
              //   // value: [4200, 3000, 20000, 35000],
              //   name: "浙江",
              //   areaStyle: {
              //     color: "#A492D4",
              //   },
              // },
              {
                // value: [5000, 14000, 28000, 21000],
                value: data,
                // name: "杭州",
                name: val.areaName,
                areaStyle: {
                  color: "#A492D4",
                },
              },
            ],
          },
        ],
      };
      this.myChart.setOption(option);

      var _this = this;
      this.myChart.on("legendselectchanged", (param) => {
        if (param.name == "浙江") {
          _this.maxNum = 110;
        } else {
          _this.maxNum = 100;
        }
      });
      setTimeout(function () {
        window.addEventListener("resize", () => {
          _this.myChart.resize();
        });
      }, 500);
    },
  },
};
</script>

<style>
</style>
